<template>
  <div>
    <!-- :disabled="disabled" -->
    <el-form inline >
      <el-form-item label="一级分类">
        <el-select v-model="category1Id" placeholder="请选择" @change="getcaregory1ListHandler">
          <el-option v-for="c1 in caregorylist1" :key="c1.id" :value="c1.id" :label="c1.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="category2Id" placeholder="请选择" @change="getcaregory2ListHandler">
          <el-option v-for="c2 in caregorylist2" :key="c2.id" :value="c2.id" :label="c2.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="category3Id" placeholder="请选择" @change="getcaregory3ListHandler">
          <el-option  v-for="c3 in caregorylist3" :key="c3.id" :value="c3.id" :label="c3.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions , mapState} from "vuex";
export default {
  name: "",
  data(){
    return{
      category1Id:'',
      category2Id:'',
      category3Id:'',
    }
  },
  methods:{
    ...mapActions('attr',['getcaregory1List','getcaregory2List','getcaregory3List','getgetcaregoryListAll']),

    //点击一级分类列表，获取二级分类列表
    getcaregory1ListHandler(){
      this.getcaregory2List(this.category1Id)
      this.category2Id = ''
      this.category3Id = ''
    },
    //点击二级分类列表，获取三级分类列表
    getcaregory2ListHandler(){
      this.getcaregory3List(this.category2Id)
      this.category3Id = ''
    },
    //点击三级分类列表，获取数据
    getcaregory3ListHandler(){
      this.$emit('getCategory3Id',this.category3Id)
    }
  },
  computed:{
    ...mapState("attr", ["caregorylist1",'caregorylist2','caregorylist3']),
  },
  mounted(){
    this.getcaregory1List()
  },
  watch:{
    category3Id:{
      handler(navl,oval){
        if(navl){
          console.log(555);
          const {category1Id,category2Id,category3Id} = this
          this.getgetcaregoryListAll({category1Id,category2Id,category3Id })
        }
      },
      immediate:true
    }
  }
  
};
</script>

<style scoped>
</style>